<template>
  <div class="app-container">
    <template>
      <div class="h_top">
        <div class="search_box">
          <el-form :model="query" :inline="true">
            <el-row :gutter="10">
              <el-col :span="4">
                <el-form-item>
                  <div class="search_label">名 称</div>
                  <el-input v-model="query.message" size="mini" @keyup.enter.native="search" />
                </el-form-item>
              </el-col>
              <el-col v-if="this.userId === 1" :span="4">
                <el-form-item>
                  <div class="search_label">帐 号</div>
                  <v-select-s v-model="query.admin_id" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <div class="search_label">发送时间</div>
                  <el-date-picker v-model="query.create_time" type="datetimerange" placeholder="" value-format="yyyy-MM-dd HH:mm:ss" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <div class="search_label">操 作</div>
                  <el-button type="primary" icon="el-icon-search" size="mini" @click="search">查找</el-button>
                  <el-button type="primary" icon="el-icon-refresh" size="mini" @click="reloadHandler">刷新</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <el-collapse accordion>
        <div v-for="(item, messageIndex) in data.messageList" :key="messageIndex">
          <el-row style="margin-bottom: 10px">
            <el-collapse-item>
              <template slot="title">
                <p style="margin-left: 10px"> {{ item.create_time }} <span v-if="isAdmin" style="margin-left: 30px;">收件人：{{ item.adminName }}</span></p>
              </template>
              <div class="Details ml10">{{ item.message }}</div>
            </el-collapse-item>
          </el-row>
        </div>
        <el-pagination class="page" background :page-size="query.limit" layout="total,prev,pager,next,jumper" :total="total" :current-page.sync="query.page" @current-change="index" @size-change="index" />
      </el-collapse>
    </template>
  </div>
</template>
<script>
import API from '@/api/message/qywx'
import VSelectS from '@/components/select-search'
import { mapGetters } from 'vuex'
export default {
  inject: ['reload'],
  components: {
    VSelectS
  },
  data() {
    return {
      data: {
        messageList: []
      },
      query: { page: 1, limit: 15 },
      loading: false,
      isAdmin: false,
      total: 0
    }
  },
  computed: {
    ...mapGetters([
      'roles', 'userId'
    ])
  },
  created() {
    this.index()
  },
  methods: {
    search() {
      this.query.page = 1
      this.index()
    },
    index() {
      this.loading = true
      API.messageList(this.query).then(res => {
        this.data.messageList = res.data.data
      }).finally(() => {
        this.loading = false
      })
      if (this.roles[0] === 16) {
        this.isAdmin = true
      }
    },
    reloadHandler() {
      this.reload()
    }
  }
}
</script>
